﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.3.0.min.js"></script>
    <script type="text/javascript">
        var connection;
        $(function () {

            // 声明PersistentConnection连接
            connection = $.connection("/chat");

            $("button").focus();
           
            var first = true;
            // 接收内容
            connection.received(function (data) {
                var re;
                try{
                    re = JSON.parse(data);
                    if (first) {
                        first = false;
                        $('#displayname').val(re.ReName);
                    }

                    if (re.Type == "101") {
                        if (re.SeName != $('#displayname').val())
                            resetTitle(re.SeName + "正在输入...");
                    }
                    else if (re.Type == "102") {
                        resetTitle("群聊");
                    }
                    else {
                        var float
                        if (re.SeName != $('#displayname').val())
                            float = "left";
                        else
                            float = "right";

                        var html = "<div style='float:" + float + "'><strong style='color:#1E9FFF'>" + re.SeName + '</strong><span style="color:#c2c2c2">(' + re.Time + ')</span><br/>'
                            + "<div style='text-indent:1em'>" + re.Msg + '</div></div> </br></br></br>';
                    }
                }catch(err){
                    var html = "<div style='float:left'><strong style='color:#1E9FFF'>Err</strong><span style='color:#c2c2c2'></span><br/>"
                                       + "<div style='text-indent:1em'>" + err + '</div></div> </br></br></br>';
                }

                $('#messages').append(html);
                //div置底
                var height = $('#messages').prop('scrollHeight');
                $("#messages").scrollTop(height);
            });

            // 开启连接
            connection.start().done(function () {
                $("#broadcast").click(function () {
                    // 发送内容
                    var text = $('#msg').val().replace("\"", "”");

                    var data = "{'Msg':'" + text
                        + "','Time':'" + getNowFormatDate()
                        + "','ReName':'" + ''
                        + "','SeName':'" + $('#displayname').val()
                        + "','Type':'0','IsGroup':'0'}";
                    $('#msg').val("");
                    connection.send(data);
                });
            });
        });

        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + date.getSeconds();
            return currentdate;
        }

        function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone",
               "SymbianOS", "Windows Phone",
               "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    console.log(userAgentInfo);
                    flag = false;
                    break;
                }
            }
            return flag;
        }

        function checkClient() {
            if (IsPC()) {
                alert("PC");
            }
            else {
                alert("phone");
            }
        }

        //重置弹出框的标题
        function resetTitle(title) {
            var index = window.parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            window.parent.layer.title(title, index)
        }
        function editMsg() {
            // 发送内容
            var data = "{'Msg':'','Time':'" + getNowFormatDate()
                + "','ReName':'" + ''
                + "','SeName':'" + $('#displayname').val()
                + "','Type':'101','IsGroup':'0'}";
            connection.send(data);
        }
        function editEndMsg() {
            // 发送内容
            var data = "{'Msg':'','Time':'" + getNowFormatDate()
                + "','ReName':'" + ''
                + "','SeName':'" + $('#displayname').val()
                + "','Type':'102','IsGroup':'0'}";
            connection.send(data);
        }
    </script>

    <link href="layer/css/layui.css" rel="stylesheet" />
    <script src="layer/layui.js"></script>
</head>
<body>
    <div style="width:600px;padding-left:10px; display:flex;justify-content:center;">
        <div>
            <div id="messages" style="height:400px;width:600px;overflow-y:scroll; "></div>
            <hr>
            <textarea id="msg" onclick="editMsg()" onblur="editEndMsg()" style="width:520px;height:50px!important;display: inline !important;" class="layui-input"></textarea>
 
            <input type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="broadcast" value="发 送" />
            <input type="hidden" id="displayname" />
        </div>
    </div>

</body>
</html>